<route lang="json5">
{
  style: {
    navigationBarTitleText: '订场购票',
  },
}
</route>
<template>
  <z-paging ref="paging" v-model="dataList" @query="queryList">
    <!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
    <!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
    <template #top>
      <wd-tabs
        ref="tabs"
        :list="tabList"
        v-model="current"
        @change="tabsChange"
        custom-class="border-b-1 border-gray-200 border-b-solid"
      >
        <wd-tab v-for="(item, index) in tabList" :key="index" :title="item.smpName"></wd-tab>
      </wd-tabs>
    </template>
    <template #bottom>
      <wd-tabbar v-model="tabbar" @change="changeTabar">
        <wd-tabbar-item title="订场">
          <template #icon>
            <text class="i-carbon-calendar text-xl"></text>
          </template>
        </wd-tabbar-item>
        <wd-tabbar-item title="购票">
          <template #icon>
            <text class="i-carbon-ticket text-xl"></text>
          </template>
        </wd-tabbar-item>
      </wd-tabbar>
    </template>
    <!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
    <view class="box-border px-4">
      <view
        v-for="(item, index) in dataList"
        :key="index"
        class="transform transition-all mt-3 duration-300 hover:scale-102 active:scale-98"
      >
        <!-- 订场卡片 -->
        <view
          v-if="tabbar === 0"
          @tap="routerPath(tabbar, item)"
          class="relative p-4 mb-3 bg-white rounded-lg shadow-sm border border-solid border-gray-200"
        >
          <!-- 左侧装饰条 -->
          <view
            v-if="item.bookingStatus === '1'"
            class="absolute left-0 top-0 w-1 h-full bg-gradient-to-b from-green-400 to-green-600 rounded-l-lg"
          />

          <!-- 内容区域 -->
          <view class="flex flex-col ml-3">
            <!-- 头部：场地名称和状态标签 -->
            <view class="flex items-center justify-between mb-3">
              <view class="flex items-center gap-2">
                <text class="i-carbon-calendar text-green-500"></text>
                <text class="text-base font-medium text-gray-800">{{ item.bookingName }}</text>
              </view>
              <text
                v-if="item.bookingStatus === '1'"
                class="px-2.5 py-0.5 text-xs bg-green-50 text-green-500 rounded-full font-medium animate-pulse"
              >
                可预订
              </text>
            </view>

            <!-- 信息区域 -->
            <view class="flex flex-wrap gap-x-6 gap-y-2">
              <!-- 场地设置 -->
              <view class="flex items-center">
                <view class="w-6 h-6 rounded-md bg-blue-50 flex items-center justify-center mr-2">
                  <text class="i-carbon-location text-blue-500 text-sm"></text>
                </view>
                <view class="flex items-center">
                  <text class="text-xs text-gray-500 mr-1">场地</text>
                  <text class="text-sm text-gray-700">{{ item.bookingSetting }}</text>
                </view>
              </view>

              <!-- 时段 -->
              <view class="flex items-center">
                <view class="w-6 h-6 rounded-md bg-purple-50 flex items-center justify-center mr-2">
                  <text class="i-carbon-time text-purple-500 text-sm"></text>
                </view>
                <view class="flex items-center">
                  <text class="text-xs text-gray-500 mr-1">时段</text>
                  <text class="text-sm text-gray-700">
                    {{ formatTime(item.startTime) }} - {{ formatTime(item.endTime) }}
                  </text>
                </view>
              </view>

              <!-- 预订数量 -->
              <view class="flex items-center">
                <view class="w-6 h-6 rounded-md bg-amber-50 flex items-center justify-center mr-2">
                  <text class="i-carbon-list-boxes text-amber-500 text-sm"></text>
                </view>
                <view class="flex items-center">
                  <text class="text-xs text-gray-500 mr-1">预订数量</text>
                  <text class="text-sm text-gray-700">{{ item.oneNumber }} 个</text>
                </view>
              </view>

              <!-- 状态标签 -->
              <view class="flex items-center">
                <text
                  :class="[
                    'px-2 py-0.5 rounded-full text-xs',
                    item.bookingStatus === '1'
                      ? 'bg-green-50 text-green-600'
                      : 'bg-gray-50 text-gray-500',
                  ]"
                >
                  {{ item.bookingStatus === '1' ? '已启用' : '已停用' }}
                </text>
              </view>
            </view>
          </view>
        </view>
        <!-- 购票卡片 -->
        <view
          v-else
          @tap="routerPath(tabbar, item)"
          class="relative p-4 mb-3 bg-white rounded-lg shadow-sm border border-solid border-gray-200"
        >
          <!-- 原有的购票卡片内容保持不变 -->
          <!-- 左侧装饰条 -->
          <view
            v-if="item.ticketStatus === '1'"
            class="absolute left-0 top-0 w-1 h-full bg-gradient-to-b from-blue-400 to-blue-600 rounded-l-lg"
          />

          <!-- 内容区域 -->
          <view class="flex flex-col ml-3">
            <!-- 头部：票名和状态标签 -->
            <view class="flex items-center justify-between mb-3">
              <view class="flex items-center gap-2">
                <text class="i-carbon-ticket text-blue-500"></text>
                <text class="text-base font-medium text-gray-800">{{ item.ticketName }}</text>
              </view>
              <text
                v-if="item.ticketStatus === '1'"
                class="px-2.5 py-0.5 text-xs bg-blue-50 text-blue-500 rounded-full font-medium animate-pulse"
              >
                热售中
              </text>
            </view>

            <!-- 信息区域 -->
            <view class="flex flex-wrap gap-x-6 gap-y-2">
              <!-- 有效时长 -->
              <view class="flex items-center">
                <view class="w-6 h-6 rounded-md bg-blue-50 flex items-center justify-center mr-2">
                  <text class="i-carbon-time text-blue-500 text-sm"></text>
                </view>
                <view class="flex items-center">
                  <text class="text-xs text-gray-500 mr-1">有效时长</text>
                  <text class="text-sm text-gray-700">{{ item.validTime }}</text>
                </view>
              </view>

              <!-- 扣除次数 -->
              <view class="flex items-center">
                <view class="w-6 h-6 rounded-md bg-purple-50 flex items-center justify-center mr-2">
                  <text class="i-carbon-calculator text-purple-500 text-sm"></text>
                </view>
                <view class="flex items-center">
                  <text class="text-xs text-gray-500 mr-1">扣除次数</text>
                  <text class="text-sm text-gray-700">{{ item.validNextNumber }} 次</text>
                </view>
              </view>

              <!-- 有效期 -->
              <view class="flex items-center">
                <view class="w-6 h-6 rounded-md bg-green-50 flex items-center justify-center mr-2">
                  <text class="i-carbon-calendar text-green-500 text-sm"></text>
                </view>
                <view class="flex items-center">
                  <text class="text-xs text-gray-500 mr-1">有效期</text>
                  <text class="text-sm text-gray-700">
                    {{ formatDate(item.marketStartDate) }} - {{ formatDate(item.marketEndDate) }}
                  </text>
                </view>
              </view>

              <!-- 状态标签 -->
              <view class="flex items-center">
                <text
                  :class="[
                    'px-2 py-0.5 rounded-full text-xs',
                    item.ticketStatus === '1'
                      ? 'bg-green-50 text-green-600'
                      : 'bg-gray-50 text-gray-500',
                  ]"
                >
                  {{ item.ticketStatus === '1' ? '已启用' : '已停用' }}
                </text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </z-paging>
  <view class="connection" @click="call">
    <wd-icon name="service" size="80rpx" color="#ffffff"></wd-icon>
  </view>
</template>
<script lang="ts" setup>
import { bookingPage, stadiumManageProjectPage, ticketPage } from '@/service/index/subscribe' // 看这里
const { loading, error, data, run } = useRequest(() =>
  stadiumManageProjectPage({
    current: 1,
    size: 100,
  }),
)

const tabs = ref(null)

const current = ref(0)
const tabList = ref([])
const paging = ref(null)
// v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
const dataList = ref([])
//保存对应场馆电话
const phone = ref('')
// tabs通知swiper切换
const tabsChange = (params) => {
  current.value = params.index
  nextTick(() => {
    formParams.value.smpId = formParams.value.projectIdList[params.index]
    console.log(formParams.value.smpId)
    paging.value.reload()
  })
}

// tabs通知swiper切换
const changeTabar = () => {
  nextTick(() => {
    paging.value.reload()
  })
}

// 获取项目
const getProjectData = () => {
  run().then(() => {
    tabList.value = data.value.list.filter(
      (item) => formParams.value.projectIdList.indexOf(item.id) > -1,
    )
    phone.value = tabList.value[0].principalUserPhone
  })
}

// 头部图片
const getImageUrl = (picture) => {
  const bkiFileTop = JSON.parse(picture || '[]')
  if (bkiFileTop.length) {
    return bkiFileTop[0].path
  } else {
    return ''
  }
}

// 路由跳转到订场页面或者购票页面
const routerPath = (type, item) => {
  if (type === 0) {
    uni.navigateTo({
      url: `/pages/subscribe/bookingDetails?type=${type}&id=${item.id}`,
    })
  } else {
    // 购票页面
    uni.navigateTo({
      url: `/pages/subscribe/ticketDetails?type=${type}&id=${item.id}`,
    })
  }
}

// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
const queryList = (pageNo, pageSize) => {
  if (tabbar.value === 0) {
    getBookingPage(pageNo, pageSize)
  } else {
    getTicketPage(pageNo, pageSize)
  }
}

const formParams = ref({
  current: 0,
  id: '',
  principalUserId: '',
  smpId: '',
  size: 19,
  smpName: '',
  smpRemark: '',
  smpStartDate: '',
  smpType: '',
  smpValidStatus: '',
  projectIdList: [],
})

// 订场列表获取
const getBookingPage = (current, size) => {
  bookingPage({
    ...formParams.value,
    current,
    size,
  })
    .then((res) => {
      // 将请求的结果数组传递给z-paging
      paging.value.complete(res.data.list)
    })
    .catch((res) => {
      // 如果请求失败写paging.value.complete(false);
      // 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
      // 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
      paging.value.complete(false)
    })
}

// 预约列表获取
const getTicketPage = (current, size) => {
  ticketPage({
    ...formParams.value,
    current,
    size,
  })
    .then((res) => {
      // 将请求的结果数组传递给z-paging
      paging.value.complete(res.data.list)
    })
    .catch((res) => {
      // 如果请求失败写paging.value.complete(false);
      // 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
      // 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
      paging.value.complete(false)
    })
}

const tabbar = ref(0)

const formatDate = (dateStr: string) => {
  if (!dateStr) return ''
  const month = dateStr.slice(4, 6)
  const day = dateStr.slice(6, 8)
  return `${month}.${day}`
}

const formatTime = (timeStr: string) => {
  if (!timeStr) return ''
  const hour = timeStr.slice(8, 10)
  const minute = timeStr.slice(10, 12)
  return `${hour}:${minute}`
}

const call = () => {
  uni.makePhoneCall({
    phoneNumber: phone.value, // 需要拨打的电话号码
    success: function () {
      console.log('拨打成功')
    },
    fail: function () {
      console.log('拨打失败')
    },
  })
}

onLoad((query: any) => {
  formParams.value.projectIdList = (query.id || '').split(',')
  formParams.value.smpId = formParams.value.projectIdList[0]
  getProjectData()
})
</script>

<style lang="scss" scoped>
.swiper {
  height: 100%;
}

.connection {
  position: fixed;
  right: 20rpx;
  bottom: 30%;
  background-color: darkgray;
  border-radius: 70rpx;
  padding: 15rpx;
}
</style>
